<template>
  <view class="category-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input" @click="goToSearch">
        <uv-icon name="search" size="16" color="#999"></uv-icon>
        <text class="search-placeholder">搜索商品</text>
      </view>
    </view>

    <!-- 分类内容 -->
    <view class="category-content">
      <!-- 左侧分类导航 -->
      <scroll-view class="category-nav" scroll-y>
        <view 
          class="nav-item" 
          v-for="item in categories" 
          :key="item.id"
          :class="{ active: currentCategory.id === item.id }"
          @click="selectCategory(item)"
        >
          <image :src="item.icon" class="nav-icon" mode="aspectFill"></image>
          <text class="nav-text">{{ item.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <scroll-view class="goods-list" scroll-y @scrolltolower="loadMore">
        <!-- 子分类 -->
        <view class="sub-categories" v-if="currentCategory.children">
          <view class="sub-category" v-for="sub in currentCategory.children" :key="sub.id" @click="selectSubCategory(sub)">
            <image :src="sub.image" class="sub-image" mode="aspectFill"></image>
            <text class="sub-name">{{ sub.name }}</text>
          </view>
        </view>

        <!-- 商品列表 -->
        <view class="goods-grid" v-if="goodsList.length > 0">
          <view class="goods-item" v-for="item in goodsList" :key="item.id" @click="goToGoodsDetail(item.id)">
            <image :src="item.image" class="goods-image" mode="aspectFill"></image>
            <view class="goods-info">
              <text class="goods-name">{{ item.name }}</text>
              <view class="goods-price">
                <text class="current-price">¥{{ item.price }}</text>
                <text class="original-price" v-if="item.original_price">¥{{ item.original_price }}</text>
              </view>
              <view class="leader-info">
                <image :src="item.leader_avatar" class="leader-avatar" mode="aspectFill"></image>
                <text class="leader-name">{{ item.leader_name }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" v-if="goodsList.length === 0 && !loading">
          <image src="https://placehold.co/200x200/png?text=%E6%97%A0%E5%95%86%E5%93%81" class="empty-image" mode="aspectFit"></image>
          <text class="empty-text">暂无商品</text>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore">
          <text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
// 使用 Vue3 <script setup> 语法重构（中文注释，变量/函数使用英文）
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsApi } from '../../api/index.js'

// 访问全局方法（如 $navigateTo/$showToast）
const { proxy } = getCurrentInstance()

// 状态
const categories = ref([])
const currentCategory = ref({})
const goodsList = ref([])
const loading = ref(false)
const hasMore = ref(true)
const page = ref(1)
const pageSize = ref(10)

// 初始化页面
const initPage = async () => {
  uni.showLoading({ title: '加载中...' })
  try {
    const list = await goodsApi.getCategories()
    categories.value = list || []

    if (categories.value.length > 0) {
      currentCategory.value = categories.value[0]
      await loadGoods()
    }
  } catch (error) {
    proxy?.$showToast?.('加载失败')
  } finally {
    uni.hideLoading()
  }
}

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category
  goodsList.value = []
  page.value = 1
  hasMore.value = true
  loadGoods()
}

// 选择子分类
const selectSubCategory = (subCategory) => {
  // 这里可以跳转到子分类页面或筛选商品
  proxy?.$navigateTo?.(`/pages/goods/list?category_id=${subCategory.id}`)
}

// 加载商品
const loadGoods = async () => {
  if (loading.value || !hasMore.value) return

  loading.value = true
  try {
    const params = {
      category_id: currentCategory.value.id,
      page: page.value,
      page_size: pageSize.value
    }

    const data = await goodsApi.getCategoryGoods(params)

    if (page.value === 1) {
      goodsList.value = data.list || []
    } else {
      goodsList.value = [...goodsList.value, ...(data.list || [])]
    }

    hasMore.value = (data.list || []).length === pageSize.value
    page.value++
  } catch (error) {
    proxy?.$showToast?.('加载失败')
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  loadGoods()
}

// 跳转搜索页
const goToSearch = () => {
  proxy?.$navigateTo?.('/pages/search/index')
}

// 跳转商品详情
const goToGoodsDetail = (id) => {
  proxy?.$navigateTo?.(`/pages/goods/detail?id=${id}`)
}

// 生命周期
onLoad(() => {
  initPage()
})
</script>

<style lang="scss" scoped>
.category-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $uni-bg-color-grey;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid $uni-border-color;
  
  .search-input {
    display: flex;
    align-items: center;
    height: 70rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    border: 1rpx solid $uni-border-color;
    box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.06);
    
    .search-placeholder {
      margin-left: 10rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}

.category-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.category-nav {
  width: 200rpx;
  background-color: #fff;
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid $uni-border-color;
    
    &.active {
      background-color: #fff5e6;
      border-left: 4rpx solid $uni-color-primary;
      
      .nav-text {
        color: $uni-color-primary;
      }
    }
    
    .nav-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }
    
    .nav-text {
      font-size: 26rpx;
      color: #333;
      text-align: center;
    }
  }
}

.goods-list {
  flex: 1;
  background-color: $uni-bg-color-grey;
  padding: 20rpx;
}

.sub-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
  
  .sub-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
    
    .sub-image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }
    
    .sub-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  
  .goods-item {
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06);
    
    .goods-image {
      width: 100%;
      height: 300rpx;
    }
    
    .goods-info {
      padding: 20rpx;
      
      .goods-name {
        font-size: 28rpx;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 10rpx;
      }
      
      .goods-price {
        margin-bottom: 10rpx;
        
        .current-price {
          font-size: 30rpx;
          color: $uni-color-primary;
          font-weight: bold;
          margin-right: 10rpx;
        }
        
        .original-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
        }
      }
      
      .leader-info {
        display: flex;
        align-items: center;
        
        .leader-avatar {
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        
        .leader-name {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  
  .load-text {
    font-size: 24rpx;
    color: #999;
  }
}
</style> 